import { useState } from "react";

const RedeemPledge = () => {
  const [IsAcitve, setIsAcitve] = useState(1);

  /**
   * 表单类别切换
   */

  const tabActive = (num: number) => {
    setIsAcitve(num);
  };

  return (
    <div className="home-redeem-pledge frame-box">
      <div className="form-box">
        <div className="home-tab-box">
          <div
            className={IsAcitve !== 1 ? "item active" : "item"}
            onClick={() => {
              tabActive(1);
            }}
          >
            <img src="/images/redeem.png" alt="" />
            <span className="name">Redeem</span>
          </div>
          <div
            className={IsAcitve !== 2 ? "item active" : "item"}
            onClick={() => {
              tabActive(2);
            }}
          >
            <img src="/images/pledge.png" alt="" />
            <span className="name">Pledge</span>
          </div>
        </div>
        {/* 可赎回 */}
        <div className="approve-box">
          <div className="left-box">
            <span className="name">Available</span>
            <span className="value">44,123 </span>
          </div>
        </div>
        {/* 填入数字 */}
        <div className="input-box">
          <input type="number" placeholder="KnowsCoin" />
          <div className="btn">All</div>
        </div>
        <div className="submit-box">
          <div className="btn">
            <span className="title">Confirm</span>
          </div>
        </div>
      </div>
    </div>
  );
};
export default RedeemPledge;
